<template>
  <div class="dfcc">
    <el-select ref="select" :value="value" @change="change" remote reserve-keyword :placeholder="placeholder" :remote-method="MixinRemoteMethodQuery" :loading="loading">
      <el-option v-for="item in MixinUserList" :key="item.id" :value="item.id" :label="item.name">
      </el-option>
    </el-select>

    <el-button style="font-size: 28px; padding: 0;" type="text" icon="el-icon-circle-plus-outline" @click="cutUserShow"></el-button>

    <hu-drawer title="选择人员" size="1000px" :open.sync="userShow" :loading="MixinLoading" @submit="addFrom2">
      <!-- tent sta -->
      <el-form :model="userData" label-width="80px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="部门" prop="orgId">
              <el-select v-model="userData.orgId" placeholder="请输入部门">
                <el-option v-for="dict in dictsList" :key="dict.id" :value="dict.id" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="用户编号" prop="code">
              <el-input v-model="userData.code" placeholder="请输入用户编号" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="userData.name" placeholder="姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="searchFromButton">
              <el-button type="primary" icon="el-icon-search" @click="getListIndex2">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="isValid" label-width="0">
          <hu-table highlight-current-row @row-click="singleElection" :tableData="tableData2" :loading="MixinLoading" :tableCol="tableCol2">
            <template v-slot:codeId="{row}">
              <el-radio class="radio" v-model="leaderId" :label="row.id"><span></span>
              </el-radio>
            </template>
            <template v-slot:operate="{row}">
              <template v-if="row.headPortraitPath">
                <el-image class="tent_image" fit="cover" :src="$config.imgUrl+row.headPortraitPath" :preview-src-list="[$config.imgUrl+row.headPortraitPath]">
                </el-image>
              </template>
              <img v-else class="tent_image" src="@/assets/images/morenImg.png">
            </template>
          </hu-table>
          <pagination v-show="total2 > 0" :total="total2" :page.sync="userData.pageNum" :limit.sync="userData.pageSize" @pagination="getList2" />
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: () => undefined,
    },
    placeholder: {
      default: () => "请选择人员",
    },
  },
  data() {
    return {
      loading: false,
      userShow: false,
      userData: {
        pageNum: 1,
        pageSize: 10,
      },
      total2: 0,
      tableData2: [],
      tableCol2: [
        {
          slot: "codeId",
          width: "55",
        },
        {
          title: "序号",
          type: "index",
          width: "55",
        },
        {
          title: "部门",
          key: "orgName",
        },
        {
          title: "用户编号",
          key: "code",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "头像",
          slot: "operate",
        },
      ],
      dictsList: [],
      leaderId: undefined,
      leaderName: undefined,
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          if (this.MixinUserList.every((item) => item.id !== val)) {
            this.$http.getUserInfor(val).then(({ result }) => {
              this.MixinUserList.push({
                name: result.name,
                id: result.id,
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    selectAdd(id, name) {
      if (this.MixinUserList.every((item) => item.id !== id)) {
        this.MixinUserList.push({
          name: name,
          id: id,
        });
      }
    },
    singleElection(row) {
      this.leaderId = row.id;
      this.leaderName = row.name;
    },
    addFrom2() {
      if (this.leaderId) {
        this.$emit("input", this.leaderId);
        this.$emit("change", this.leaderId);
        if (this.MixinUserList.every((item) => item.id !== this.leaderId)) {
          this.MixinUserList.push({
            name: this.leaderName,
            id: this.leaderId,
          });
        }
        this.userShow = false;
      } else {
        this.$modal.msg("请勾选人员");
      }
    },
    change(e) {
      this.$emit("input", e);
      this.$emit("change", e);
    },
    cutUserShow() {
      this.leaderId = this.value;
      this.userShow = true;
      if (!this.dictsList.length) {
        this.getDicts();
        this.getList2();
      }
    },
    resetUsers() {
      this.userData = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    // 部门
    getDicts() {
      this.$http.getDicts().then(({ result }) => {
        this.dictsList = result;
      });
    },
    getListIndex2() {
      this.userData.pageNum = 1;
      this.getList2();
    },
    getList2() {
      this.MixinLoading = true;
      this.$http.getUserListElement(this.userData).then(({ result }) => {
        this.MixinLoading = false;
        this.total2 = result.total;
        this.tableData2 = result.records;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-circle-plus-outline {
  // cursor: pointer;
  // padding-left: 5px;
  // font-size: 30px;
  // color: #336ffc;
  // &:hover {
  //   color: #477fff;
  // }
}
.tent_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
